import { editProfileAction, userProfileAction } from '@/store/actions/profile'
import { useInitState } from '@/utils/hooks'
import { Button, List, DatePicker, NavBar, Toast, Dialog } from 'antd-mobile'
import classNames from 'classnames'

import styles from './index.module.scss'

// 导入弹框组件
import InputPop from './components/InputPop'
import ListPop from './components/ListPop'
import { useState } from 'react'
// 导入type的类型
import { InputPopType } from './components/InputPop'
import { ListPopType } from './components/ListPop'
import dayjs from 'dayjs'
import { useDispatch } from 'react-redux'
import { useHistory } from 'react-router-dom'
import { logoutAction } from '@/store/actions/login'

const Item = List.Item

const ProfileEdit = () => {
  const { profile } = useInitState(userProfileAction(), 'profile')
  // 昵称和简介的弹框控制
  const [showInputPop, setShowInputPop] = useState(false)
  // 头像和性别的弹框控制
  const [showListPop, setShowListPop] = useState(false)
  // 日期弹框控制
  const [dateShow, setDateShow] = useState(false)
  const [inputPopType, setInputPopType] = useState<InputPopType['type']>('name')
  const [listPopType, setListPopType] = useState<ListPopType['type']>('gender')
  // dispatch获取
  const dispatch = useDispatch()
  // history
  const history = useHistory()

  // 关闭弹层
  const closeInputPop = () => {
    setShowInputPop(false)
  }
  const closeListPop = () => {
    setShowListPop(false)
  }
  // 弹出 名字 和 简介 弹层
  const inputPopShow = (type: InputPopType['type']) => {
    // 修改类型
    setInputPopType(type)
    // 弹出弹层
    setShowInputPop(true)
  }

  // 弹出 头像 和 性别弹层
  const listPopShow = (type: ListPopType['type']) => {
    setListPopType(type)
    // 弹出弹层
    setShowListPop(true)
  }

  // 修改生日
  const submitDate = async (date: Date) => {
    const birthday = dayjs(date).format('YYYY-MM-DD')
    await dispatch(editProfileAction('birthday', birthday))
    Toast.show({
      icon: 'success',
      content: '生日更新成功!',
    })
    setDateShow(false)
  }

  // 登出方法
  const logout = () => {
    Dialog.show({
      content: '是否登出',
      closeOnAction: true,
      actions: [
        [
          {
            key: 'cancel',
            text: '取消',
            style: { color: 'gray' },
            onClick() {
              console.log('取消')
            },
          },
          {
            key: 'delete',
            text: '确认',
            // bold: true,
            danger: true,
            onClick() {
              // console.log('确认')
              // 触发登出的action即可
              dispatch(logoutAction())
              // 返回登录页 或首页
              // replace没有历史记录,无法后退回来
              history.replace('/login')
            },
          },
        ],
      ],
    })
  }
  return (
    <div className={styles.root}>
      {/* 昵称 和 介绍的弹框 */}
      <InputPop type={inputPopType} close={closeInputPop} visible={showInputPop} />
      <ListPop type={listPopType} close={closeListPop} visible={showListPop} />
      <div className='content'>
        {/* 标题 */}
        <NavBar
          onBack={() => {
            history.goBack()
          }}
          style={{
            '--border-bottom': '1px solid #F0F0F0',
          }}
        >
          个人信息
        </NavBar>

        <div className='wrapper'>
          {/* 列表 */}
          <List className='profile-list'>
            {/* 列表项 */}
            <Item
              onClick={() => {
                listPopShow('photo')
              }}
              extra={
                <span className='avatar-wrapper'>
                  <img width={24} height={24} src={profile.photo} alt='' />
                </span>
              }
              arrow
            >
              头像
            </Item>
            <Item
              onClick={() => {
                inputPopShow('name')
              }}
              arrow
              extra={profile.name}
            >
              昵称
            </Item>
            <Item
              onClick={() => {
                inputPopShow('intro')
              }}
              arrow
              extra={<span className={classNames('intro', 'normal')}>{profile.intro || '未填写'}</span>}
            >
              简介
            </Item>
          </List>

          <List className='profile-list'>
            <Item
              onClick={() => {
                listPopShow('gender')
              }}
              arrow
              extra={profile.gender === 0 ? '男' : '女'}
            >
              性别
            </Item>
            <Item
              onClick={() => {
                setDateShow(true)
              }}
              arrow
              extra={profile.birthday}
            >
              生日
            </Item>
          </List>

          <DatePicker
            onCancel={() => {
              setDateShow(false)
            }}
            onConfirm={submitDate}
            visible={dateShow}
            value={new Date(profile.birthday)}
            title='选择年月日'
            min={new Date(1900, 0, 1, 0, 0, 0)}
            max={new Date()}
          />
        </div>

        <div className='logout'>
          <Button onClick={logout} className='btn'>
            退出登录
          </Button>
        </div>
      </div>
    </div>
  )
}

export default ProfileEdit
